<div class="grid-container">
    <div class="grid-x">
        <form action="/user/0/save" method="post" id="contextFormId">
            <div class="grid-x grid-padding-x">

                <!-- --- --- --- -->

                <div class="medium-5 cell">
                    <label>
                        {{ tr.login }}
                        <input
                            name="login"
                            type="text"
                            placeholder="{{ tr.login }}">
                    </label>
                </div>

                <div class="medium-5 cell">
                    <label>
                        {{ tr.email }}
                        <input
                            name="email"
                            type="text"
                            placeholder="{{ tr.email }}">
                    </label>
                </div>

                <div class="medium-2 cell">
                    <label>
                        {{ tr.uiLang }}
                        <input
                            name="uiLang"
                            type="text"
                            placeholder="{{ tr.uiLang }}">
                    </label>
                </div>

                <!-- --- --- --- -->

                <div class="medium-4 cell">
                    <label>
                        {{ tr.firstName }}
                        <input
                            name="firstName"
                            type="text"
                            placeholder="{{ tr.firstName }}">
                    </label>
                </div>

                <div class="medium-4 cell">
                    <label>
                        {{ tr.middleName }}
                        <input
                            name="middleName"
                            type="text"
                            placeholder="{{ tr.middleName }}">
                    </label>
                </div>

                <div class="medium-4 cell">
                    <label>
                        {{ tr.lastName }}
                        <input
                            name="lastName"
                            type="text"
                            placeholder="{{ tr.lastName }}">
                    </label>
                </div>

                <!-- --- --- --- -->

                <div class="medium-6 cell">
                    <label>
                        {{ tr.password }}
                        <input
                            id="inputPasswordId"
                            name="password"
                            type="password"
                            placeholder="{{ tr.password }}">
                    </label>
                </div>

                <div class="medium-6 cell">
                    <label>
                        {{ tr.confirmPassword }}
                        <input
                            id="inputConfirmPasswordId"
                            type="password"
                            placeholder="{{ tr.confirmPassword }}">
                        <span
                            id="confirmPasswordMessageId"
                            class="label warning"
                            style="visibility: hidden;">{{ tr.passwordsDoNotMatch }}</span>
                    </label>
                    <script>
                        $('#inputPasswordId, #inputConfirmPasswordId').on('keyup', function () {
                          if ($('#inputPasswordId').val() == $('#inputConfirmPasswordId').val()) {
                            $('#confirmPasswordMessageId').css("visibility","hidden");
                            $('#saveButton').prop('disabled', false);
                          } else {
                            $('#confirmPasswordMessageId').css("visibility","visible");
                            $('#saveButton').prop('disabled', true);
                          }
                        });
                    </script>
                </div>

                <!-- --- --- --- -->

                <div class="medium-12 cell">
                    <label>
                        {{ tr.needChangePassword }}
                        <div class="switch">
                            <input
                                id="needChangePasswordValueInputId"
                                name="needChangePassword"
                                type="hidden">
                            <input
                                id="needChangePasswordVisibleInputId"
                                class="switch-input"
                                type="checkbox">
                            <label class="switch-paddle" for="needChangePasswordVisibleInputId">
                                <span class="show-for-sr">{{ tr.needChangePassword }}</span>
                            </label>
                            <script>
                                var needChangePasswordVisible = document.querySelector(
                                    'input[id="needChangePasswordVisibleInputId"]'
                                );
                                needChangePasswordVisible.addEventListener('change', () => {
                                    document.querySelector(
                                        'input[id="needChangePasswordValueInputId"]'
                                    ).value = (needChangePasswordVisible.checked) ? 'on' : '';
                                });
                            </script>
                        </div>
                    </label>
                </div>

                <div class="medium-12 cell">
                    <label>
                        {{ tr.isBlocked }}
                        <div class="switch">
                            <input
                                id="isBlockedValueInputId"
                                name="isBlocked"
                                type="hidden">
                            <input
                                id="isBlockedVisibleInputId"
                                class="switch-input"
                                type="checkbox">
                            <label class="switch-paddle" for="isBlockedVisibleInputId">
                                <span class="show-for-sr">{{ tr.isBlocked }}</span>
                            </label>
                            <script>
                                var isBlockedVisible = document.querySelector(
                                    'input[id="isBlockedVisibleInputId"]'
                                );
                                isBlockedVisible.addEventListener('change', () => {
                                    document.querySelector(
                                        'input[id="isBlockedValueInputId"]'
                                    ).value = (isBlockedVisible.checked) ? 'on' : '';
                                });
                            </script>
                        </div>
                    </label>
                </div>

                <!-- --- --- --- -->

            </div>
        </form>
    </div>
</div>
